<template>
	<div>
		<u-popup v-model="show" mode="bottom" border-radius="30" :safe-area-inset-bottom="true">
      <div class="top flex">
        <u-icon class="icon" name="arrow-down" size="32" @click="cancel"></u-icon>
        <span class="confirm" @click="confirm">确定</span>
      </div>
      <div class="sentiments flex">
				<div class="sentiment sentiment-1" :class="value==1 && 'sentiment-1-on'" @click="sentiment(1)">正</div>
				<div class="sentiment sentiment-2" :class="value==2 && 'sentiment-2-on'" @click="sentiment(2)">中</div>
				<div class="sentiment sentiment-3" :class="value==3 && 'sentiment-3-on'" @click="sentiment(3)">负</div>
			</div>
			<div class="btn" @click="cancel">取消</div>
		</u-popup>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { sentimentAttr } from "@/api/subject.js";

export default {
	data() {
		return {
			value: 0,
		}
	},
	computed: {
		show: {
			get() {
				return this.$store.state.isSentiment;
			},
			set(value) {
				this.$store.state.isSentiment = value;
			}
		},
	},
	methods: {
		change(val) {
			this.value = val;
		},
		cancel() {
			this.$store.state.isSentiment = false;
		},
		confirm() {
			let ids = this.$store.state.selectedArticle.map(item=>item.id);
			sentimentAttr({ids: ids,attr: this.value}).then(({code})=>{
				if(code == 200){
					this.cancel();
					uni.$emit("markSentiment", {ids: ids, val: this.value});
					this.$refs.uToast.show({
						title: "倾向性修改成功",
						type: "success",
					});
				}
			});
		},
		sentiment(val) {
			this.value = val;
		},
	}
}
</script>

<style lang="scss" scoped>
.top{
  font-size: 36rpx;
  font-weight: bold;
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
  justify-content: space-between;
  align-items: center;
  .icon{
    cursor: pointer;
  }
  .confirm{
    cursor: pointer;
    font-size: 32rpx;
    color: #1E62FC;
  }
}
.btn{
	border-top: 2rpx solid #eee;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	cursor: pointer;
	font-size: 32rpx;
	
	&:active{
		opacity: 0.9;
	}
}

.sentiments{
	margin: 0 20rpx;
	padding: 40rpx 0;
	border-top: 2rpx solid #eee;
  justify-content: center;
	.sentiment{
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50%;
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 50rpx;
	}
	.sentiment-1{
		color: #3477FF;
		border: 2rpx solid #3477FF;
	}
  .sentiment-1-on{
    background-color: #3477FF;
    color: #fff;
  }
	.sentiment-2{
		color: #F8B551;
		border: 2rpx solid #F8B551;
	}
  .sentiment-2-on{
    background-color: #F8B551;
    color: #fff;
  }
	.sentiment-3{
		color: #E60012;
		border: 2rpx solid #E60012;
	}
  .sentiment-3-on{
    background-color: #E60012;
    color: #fff;
  }
}
</style>